<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
      .w {
        width: 70%;
        margin: 0 auto;
        margin-top: 10px;
      }

      .header {
        height: 100px;
        background-color: red;
      }

      .banner {
        height: 200px;
        background-color: pink;
      }

      .main {
        height: 1267px;
        background-color: orange;
      }

      .slider-bar {
        width: 70px;
        height: 200px;
        background-color: yellow;
        position: absolute;
        left: 85%;
        top: 330px;
      }

      .goBack {
        display: none;
        position: absolute;
        bottom: 0;
      }
    </style>
  <body>
    <div class="header w">头部区域</div>
    <div class="banner w">Banner区域</div>
    <div class="main w">主体部分</div>
    <div class="slider-bar">
      <span class="goBack">返回顶部</span>
    </div>
    <script>
      var goBack = document.querySelector('.goBack');
      var slider = document.querySelector('.slider-bar');
      var banner = document.querySelector('.banner');
      var header = document.querySelector('.header');
      // 给返回顶部注册单击事件返回顶部
      goBack.onclick = function () {
        window.scrollTo(0, 0);
      };
      // 给页面绑定scroll滚动条事件
      document.onscroll = function () {
        // 获取页面左侧和顶部卷去的距离
        slider.style.top = window.pageYOffset;
        if (window.pageYOffset > (header.scrollHeight + banner.scrollHeight + 30)) {
          goBack.style.display = 'block';
          slider.style.position = 'fixed';
          slider.style.left = '85%';
          slider.style.top = '0px';
        } else {
          slider.style.position = 'absolute';
          slider.style.left = '85%';
          slider.style.top = header.scrollHeight + banner.scrollHeight + 30 + 'px';
          goBack.style.display = 'none';
        }
      };
    </script>
  </body>
</html>